<template>
  <div class="search-layout">
    <main class="search-main">
      <div class="search-content">
        <!-- 面包屑导航 -->
        <a-breadcrumb class="breadcrumb">
          <a-breadcrumb-item>
            <router-link to="/">首页</router-link>
          </a-breadcrumb-item>
          <a-breadcrumb-item>搜索结果</a-breadcrumb-item>
        </a-breadcrumb>

        <!-- 搜索框 -->
        <div class="search-header">
          <a-input-search
            v-model:value="searchQuery"
            placeholder="搜索文档..."
            enter-button
            :loading="loading"
            @search="handleSearch"
            size="large"
          />
        </div>

        <!-- 搜索结果 -->
        <div class="search-results">
          <template v-if="searchQuery">
            <div class="results-header">
              <h2 class="results-title">
                搜索 "{{ searchQuery }}" 的结果
                <span class="results-count">共 {{ pagination.total }} 条</span>
              </h2>
            </div>

            <a-list
              :data-source="documents"
              :loading="loading"
              :pagination="pagination"
              @change="handlePageChange"
            >
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-list-item-meta>
                    <template #title>
                      <router-link :to="`/document/${item.slug}`" class="document-title">
                        {{ item.title }}
                      </router-link>
                    </template>
                    <template #description>
                      <div class="document-meta">
                        <span>
                          <folder-outlined />
                          <router-link :to="`/category/${item.category.slug}`">
                            {{ item.category.title }}
                          </router-link>
                        </span>
                        <span><calendar-outlined /> {{ formatDate(item.created_at) }}</span>
                        <span><eye-outlined /> {{ item.views }} 次阅读</span>
                      </div>
                      <p v-if="item.description" class="document-description">
                        {{ item.description }}
                      </p>
                      <div v-if="item.highlight" class="search-highlight" v-html="item.highlight"></div>
                    </template>
                  </a-list-item-meta>
                </a-list-item>
              </template>
              <template #renderEmpty>
                <a-empty :description="loading ? '搜索中...' : '暂无搜索结果'" />
              </template>
            </a-list>
          </template>
          <template v-else>
            <div class="empty-search">
              <a-empty description="请输入搜索关键词">
                <template #image>
                  <search-outlined class="empty-icon" />
                </template>
              </a-empty>
            </div>
          </template>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { 
  SearchOutlined,
  FolderOutlined,
  CalendarOutlined,
  EyeOutlined
} from '@ant-design/icons-vue'
import { searchDocuments } from '@/api/document'

const route = useRoute()
const router = useRouter()
const searchQuery = ref('')
const documents = ref([])
const loading = ref(false)
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: total => `共 ${total} 条结果`
})

// 执行搜索
const performSearch = async () => {
  if (!searchQuery.value) return

  loading.value = true
  try {
    const response = await searchDocuments({
      query: searchQuery.value,
      page: pagination.value.current,
      page_size: pagination.value.pageSize
    })
    documents.value = response.data.results
    pagination.value.total = response.data.count
  } catch (error) {
    message.error('搜索失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

// 处理搜索
const handleSearch = () => {
  pagination.value.current = 1
  router.push({
    path: '/search',
    query: { q: searchQuery.value }
  })
}

// 处理分页变化
const handlePageChange = (page) => {
  pagination.value.current = page.current
  performSearch()
}

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 监听路由参数变化
watch(
  () => route.query.q,
  (newQuery) => {
    searchQuery.value = newQuery || ''
    if (newQuery) {
      performSearch()
    } else {
      documents.value = []
      pagination.value.total = 0
    }
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
.search-layout {
  min-height: 100vh;
  padding: 24px;
  margin-top: 56px;
  background: var(--bg-color);
}

.search-main {
  max-width: 1200px;
  margin: 0 auto;
}

.breadcrumb {
  margin-bottom: 24px;
}

.search-header {
  margin-bottom: 32px;
}

.results-header {
  margin-bottom: 24px;

  .results-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);

    .results-count {
      margin-left: 12px;
      font-size: 14px;
      font-weight: normal;
      color: var(--text-color-secondary);
    }
  }
}

.document-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  text-decoration: none;

  &:hover {
    color: var(--primary-color);
  }
}

.document-meta {
  display: flex;
  gap: 16px;
  color: var(--text-color-secondary);
  font-size: 12px;
  margin-bottom: 8px;

  span {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  a {
    color: var(--primary-color);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.document-description {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--text-color-secondary);
}

.search-highlight {
  font-size: 14px;
  color: var(--text-color);
  
  :deep(em) {
    font-style: normal;
    padding: 2px 4px;
    margin: 0 2px;
    background: var(--highlight-bg);
    border-radius: 2px;
  }
}

.empty-search {
  padding: 48px 0;
  text-align: center;

  .empty-icon {
    font-size: 48px;
    color: var(--text-color-secondary);
  }
}
</style> 